﻿@page "/bswup/progress"
@inherits AppComponentBase

<PageOutlet Url="bswup/progress"
            Title="BswupProgress - Bswup"
            Description="Progress component of the bit Bswup" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Progress component</BitText>
    <br />
    <BitText Typography="BitTypography.Subtitle1" Gutter>
        bit Bswup has its own Progress component to simplify the process of implementing a sophisticated UI widget to show the update progress.
    </BitText>
    <br />

    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>BswupProgress</BitText>
        <div class="section-card-txt">
            The BswupProgress component can be used to implement a customizable update progress easily.
            In order to use this component first add its script tag to the default document of your app:
            <br />
            <CodeBox>&lt;script src="_content/Bit.Bswup/bit-bswup.progress.js">&lt;/script></CodeBox>

            Then you can use it in your app like this:
            <br />
            <CodeBox>&lt;div>
    &lt;BswupProgress AppContainer="#app-container" AutoReload=false>
        &lt;div class="bswup-progress-text" />
        &lt;svg class="bswup-container">
            &lt;circle r="40%" cx="50%" cy="50%" />
            &lt;circle r="40%" cx="50%" cy="50%" />
        &lt;/svg>
    &lt;/BswupProgress>
    &lt;button id="bit-bswup-reload">Update available, Click to Reload&lt;/button>
&lt;/div></CodeBox>

            <BitAccordion Title="CSS">
                <div style="max-height: 300px; overflow: auto;">
                    <CodeBox>#bit-bswup {
    top: 2px;
    left: 50%;
    display: none;
    z-index: 999999;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI";
}

#bit-bswup .bswup-container {
    width: 3rem;
    height: 3rem;
    display: block;
    position: relative;
}

#bit-bswup .bswup-container circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.2rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

#bit-bswup .bswup-container circle:last-child {
    stroke: #1b6ec2;
    transition: stroke-dasharray 0.05s ease-in-out;
    stroke-dasharray: calc(3.141 * var(--bit-bswup-percent, 0%) * 0.8), 500%;
}

#bit-bswup .bswup-progress-text {
    top: 50%;
    left: 50%;
    font-size: 12px;
    position: absolute;
    text-align: center;
    font-weight: normal;
    transform: translate(-50%, -50%);
}

#bit-bswup .bswup-progress-text::after {
    content: var(--bit-bswup-percent-text, "");
}

#bit-bswup-reload {
    top: 10px;
    right: 10px;
    display: none;
    position: fixed;
}</CodeBox>
                </div>
            </BitAccordion>
            <br /><br />
            The parameters of this component are as follows:
            <br /><br />
            <b>AutoReload</b>: if the BswupProgress should auto-reload the app after downloading the new update.
            The default value is true.
            <br /><br />
            <b>ShowAssets</b>: if the BswupProgress should show the assets list in its default UI.
            The default value is false.
            <br /><br />
            <b>ShowLogs</b>: if the BswupProgress should show the logs of its process in the console of the web browser.
            The default value is false.
            <br /><br />
            <b>HideApp</b>: if the BswupProgress should hide the main app's UI in the process of the update progress.
            The default value is false.
            <br /><br />
            <b>AppContainer</b>: the css selector of the blazor app container element.
            The default value is "#app".
            <br /><br />
            <b>Handler</b>: the custom js handler function to do custom additional tasks in Bswup events.
            The default value is null.
            <br /><br /><br/>
            
            As you can see in the above example, you can provide your own custom UI and use it 
            instead of the default UI of the BswupProgress component.
            
            <br /><br />

            <b>Note</b>: In the case of using a custom UI, you can use the following custom CSS properties to access the progress <a href="#"></a>
            <br/><br/>
            <b>--bit-bswup-percent</b>: the number value of the current progress percent.
            <br /><br />
            <b>--bit-bswup-percent-text</b>: the string (text) value of the current progress percent with % character at the end of it.
        </div>

    </section>

</div>

<NavigationButtons Prev="Service Worker" PrevUrl="/bswup/service-worker" />
